import { defineStore } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist';

// 1. 定义容器、导出容器
// 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器
// 参数2：一些选项对象，也就是state、getter和action
// 返回值：一个函数，调用即可得到容器实例

export const useMainStore = defineStore({
	id:'main', 
	// 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
	// 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
	// 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
	state: () => {
		return {
			info: "pinia 可以使用---",
			userinfo: { UserName: "谢伟", Sex: "男" },
			counter: 0,
			sites: ["百度", "谷歌", "搜狐"],
			ProfilePhoto:"",
		}
	},
	//开启数据缓存
	persist: {
		enabled: true,
		 strategies: [
		       {
		         //key: 'userInfo',//设置存储的key
		         storage: localStorage,//表示存储在localStorage
		       }
		     ]    
	},
	getters: {
		// 函数接收一个可选参数：state状态对象
		count10(state) {
			return state.counter + 10
		},
		// 若使用this.count，则必须指明返回数据的类型
		count11() : number {
			return this.counter + 11
		},
		showSites() {
			return this.sites.join(",")
		}
	},

	actions: {
		changeState() {
			this.counter += 10
			this.info = "actions修改数据"
		},
		changeStates(num : number) {
			this.counter += num + 2
			this.info = "actions修改数据"
		},
		setdata(info:any):void{
			this.userinfo=info;
		},
		setProfilePhoto(ProfilePhoto:any):void{
			this.ProfilePhoto=ProfilePhoto;
		}
	}
})
// 2. 使用容器中的 state
// 3. 通过 getter 修改 state
// 4. 使用容器中的 action 同步和异步请求